<template>
	<view>
		<u-popup :show="show" mode="center" @close="close" :customStyle="{borderRadius: '20rpx'}">
			<view class="popupBox">
				<view class="popupTitle">
					<text>请输入图形验证码</text>
					<image @click="close" class="popupClose" src="/static/store/close-icon.png"></image>
				</view>
				<view class="inputBox">
					<input type="text" v-model="captcha" maxlength="4" placeholder="请输入验证码" class="codeBoxs"
						placeholder-style="color:#999999;font-size:28rpx" />
					<image class="inputImage" :src="codeImage"></image>
				</view>
				<view class="replaceBox">
					<text @click="getCodeEvent()">看不清？换一张</text>
				</view>
				<view class="confirmCode" @click="confirmEvent()">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import urlConfig from '../../common/api/config.js'
	export default {
		props:{
		   show: {
			 type: Boolean,
			 required: false,
		   },
		
		   
		},
		data() {
			return {
				captcha:'',
				codeImage:'',
				key:"",
			}
		},
		methods: {
			initEvent(){
				this.captcha = ''
			},
			getCodeEvent(){
				let that = this
				that.getCaptchaEvent().then(function(data){
					that.captcha =''
					that.codeImage = data
				}) 	
			},
			confirmEvent() { //发送验证码
			  this.$emit('confirmEvent',this.key,this.captcha);
			},
			
			close() {
				this.validateImage = '',
				this.captcha = ''
				this.key = ''
				this.$emit('closeEvent');
			},
			getCaptchaEvent() {
				let that = this
				return new Promise((resolve, reject) => {
					that.key = that.utils.randomNum(32)
					uni.request({
						url: urlConfig + '/api/captcha/captcha', //仅为示例，并非真实接口地址。
						data: {
							key: that.key
						},
						responseType: 'arraybuffer',
						method: "POST",
						header: {
							"Content-Type": "application/x-www-form-urlencoded"
						},
						success: (res) => {
							let base64 = 'data:image/jpeg;base64,' + uni.arrayBufferToBase64(res.data)
							resolve(base64)
						},
						fail: err => {
							reject(err)
						}
					});
			
				})
			
			}
		}
	}
</script>

<style lang="scss" scoped>
.inputImage {
		width: 180rpx;
		height: 90rpx;
	}

	.confirmCode {
		width: 550rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		color: #FFFFFF;
		background: #CF1322;
		border-radius: 45rpx;
		margin: 50rpx auto 0 auto;
	}

	.replaceBox {
		width: 100%;
		text-align: right;
		padding-right: 40rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #CF1322;
		margin-top: 10rpx;
	}

	.codeBoxs {
		width: calc(100% - 180rpx);
		font-size: 28rpx;
		height: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.inputBox {
		width: 550rpx;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		border: 1rpx solid #D1D1D1;
		border-radius: 12rpx;
		margin: 40rpx auto 0 auto;
		overflow: hidden;
	}

	.popupClose {
		position: absolute;
		right: 40rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 32rpx;
		height: 32rpx;
	}

	.popupTitle {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 34rpx;
		color: #333333;
		font-weight: bold;
		margin-top: 20rpx;
	}

	.popupBox {
		width: 630rpx;
		height: 430rpx;
		border-radius: 20rpx;
	}
</style>
